import React, { useEffect, useRef } from 'react';
import { Box } from '$components';
import * as echarts from 'echarts';
import './style.less';

function ProtectionAlarms(props) {
    const { waterLevelAlarms = [] } = props;
    const chartRef = useRef(null);
    
    // 固定的最近7天的告警数据
    const alarmData = [5, 6, 4, 7, 5, 6, 4];
    
    // 获取最近7天的日期
    const getLastSevenDays = () => {
        const dates = [];
        for (let i = 6; i >= 0; i--) {
            const date = new Date();
            date.setDate(date.getDate() - i);
            dates.push(`${date.getMonth() + 1}/${date.getDate()}`);
        }
        return dates;
    };

    const dateLabels = getLastSevenDays();
    
    // 计算一周内总警告数
    const weeklyTotal = alarmData.reduce((sum, count) => sum + count, 0);
    // 今日警告数
    const todayAlarms = alarmData[alarmData.length - 1];

    useEffect(() => {
        if (chartRef.current) {
            const myChart = echarts.init(chartRef.current);
            
            const option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: '{b}: {c}个告警'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    top: '10%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: dateLabels,
                    axisLine: {
                        lineStyle: {
                            color: '#0D4892'
                        }
                    },
                    axisLabel: {
                        color: '#E6EFFF',
                        fontSize: 12
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '告警数',
                    nameTextStyle: {
                        color: '#E6EFFF'
                    },
                    splitLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(91, 180, 218, 0.1)'
                        }
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#0D4892'
                        }
                    },
                    axisLabel: {
                        color: '#E6EFFF',
                        fontSize: 12
                    }
                },
                series: [
                    {
                        name: '告警数',
                        type: 'bar',
                        barWidth: '40%',
                        data: alarmData,
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#24DDFA' },
                                { offset: 1, color: '#267FD3' }
                            ])
                        },
                        label: {
                            show: true,
                            position: 'top',
                            color: '#E6EFFF',
                            fontSize: 12
                        }
                    }
                ]
            };
            
            myChart.setOption(option);
            
            // 监听窗口大小变化，调整图表大小
            const handleResize = () => {
                myChart.resize();
            };
            window.addEventListener('resize', handleResize);
            
            return () => {
                window.removeEventListener('resize', handleResize);
                myChart.dispose();
            };
        }
    }, [dateLabels]);

    return (
        <Box title="周边防护报警">
            <div className="alarm-container" style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
                <div className="alarm-summary" style={{ 
                    display: 'flex', 
                    justifyContent: 'center', 
                    padding: '10px',
                    gap: '40px'
                }}>
                    <div className="alarm-weekly" style={{ textAlign: 'center' }}>
                        <div style={{ fontSize: '14px', color: '#E6EFFF', marginBottom: '5px' }}>一周内警告数</div>
                        <div style={{ fontSize: '24px', color: '#24DDFA', fontWeight: 'bold' }}>{weeklyTotal}</div>
                    </div>
                    <div className="alarm-today" style={{ textAlign: 'center' }}>
                        <div style={{ fontSize: '14px', color: '#E6EFFF', marginBottom: '5px' }}>今日警告数</div>
                        <div style={{ fontSize: '24px', color: '#F8C86B', fontWeight: 'bold' }}>{todayAlarms}</div>
                    </div>
                </div>
                
                <div className="alarm-chart" style={{ flex: 1,}}>
                    <div ref={chartRef} style={{ height: '100%', width: '100%' }}></div>
                </div>
            </div>
        </Box>
    );
}

export default ProtectionAlarms;
